<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</script>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">

	var map;
	var infowindow;
	var markersArray = [];
	
	function initialize(){
	var latlng = new google.maps.LatLng(34.063509,-118.44541); 
	var myOptions = {
	zoom: 8,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
	}
	
	function clearOverlays() {
	  if (markersArray) {
	    for (i in markersArray) {
	      markersArray[i].setMap(null);
	    }
	  }
	}
	
	
	// Deletes all markers in the array by removing references to them
	function deleteOverlays() {
	  if (markersArray) {
	    for (i in markersArray) {
	      markersArray[i].setMap(null);
	    }
	    markersArray.length = 0;
	  }
	}

	function tracknow(data) {
	    clearOverlays();
	    deleteOverlays();
	    
		    
		    var coords = [];
		    for (var i = 0; i < data.length; i++)
		    {
			   coords.push(new google.maps.LatLng(data[i].lat, data[i].lng));
		    }
		    
			
		    var travelPath = new google.maps.Polyline({
		      path: coords,
		      strokeColor: "#FF0000",
		      strokeOpacity: 1.0,
		      strokeWeight: 2
		    });
		    
		    travelPath.setMap(map);
		    
		    infowindow = new google.maps.InfoWindow({})
		     
		    for (var j = 0; j < data.length; j++) {
			    
			      var marker = new google.maps.Marker({
				position: coords[j],
				map: map,
				title: "Time at " + data[j].time
			      })
			      markersArray.push(marker);
			      
			      addInfoWindow(infowindow, map, marker, "At " + data[j].time + " minutes");
			   
		    }
	    
	}
  
	function addInfoWindow(infowindow, map, marker, content, fontColor, fontSize, fontName) {
	      google.maps.event.addListener(marker, 'click', function() {
	      infowindow.content = content;
	      infowindow.open(map, marker);
	      });
	}
	function addmarker(dataloc){
		var markcoord = new google.maps.LatLng(dataloc.lat, dataloc.lng);
		var markes = new google.maps.Marker({
		position: markcoord,
		map: map,
		title: "Time at " + dataloc.time
		})
		addInfoWindow(infowindow, map, markes, "At " + dataloc.time + " minutes");
		
	}
  
</script>  


<script type="text/javascript">

	$(document).ready(function()
	{
	    // first you may need to initialise the map - then start fetching items
	    initialize();
	    setInterval(function() {
	    //call $.ajax here
	    getlocation();
	}, 5000);
	    
	});


	function getlocation()
	{
	    console.log("getlocation");		
	
	    var url = "/locations";
	
	    $.ajax({
		    url: url,
		    dataType: 'json',
		    success: function(data){
                    $("#passcode").html('passcode is ' + data.passcode)
		    console.log(data.locations[0]);
		    tracknow(data.locations);
			  
		    },
		    error: function() {
			alert("error");	  
		    }
	    });
	}
</script>
  

</head>
<body>
  <h3 id="passcode">
    downloading passcode...
  </h3>
  <div id="map_canvas" style="width:50%; height:50%"></div>
  <a href="/logout">Logout</a>
</body>
</html>
  
    
    
    
    
